<template>
  <q-dialog  v-model="printerDiag"> 
    <NFCPrinter :part_id="part_id"></NFCPrinter>
  </q-dialog>
  <q-card>
    <q-card-section>
      <div class="text-h6 sub-header fac">
        {{ props.action == 'create' ? 'New' : '' }} QR Code
      </div>
    </q-card-section>
    <q-card-section>
      <div class="fac">
        <vue-qr
          v-if="props.qrcode.qr_code.length != 0"
          ref="myQr"
          id="qr"
          :text="props.qrcode.qr_code"
          :size="100"
          :margin="0"
        ></vue-qr>
        <div id="text"></div>
      </div>
    </q-card-section>
    <q-card-section>
      <div class="row">
        <div class="col-4 fal">QR Code:</div>

        <div class="col-8 q-pa-sm">
          <q-input
            borderless
            class="text-area-css"
            :model-value="props.qrcode.qr_code"
            style="max-width: 300px"
            type="textarea"
            :dense="true"
          />
        </div>
        <div class="col-4 fal">Date:</div>
        <div class="col-8 q-pa-sm">
          <q-input
            borderless
            class="input-css"
            :model-value="props.qrcode.date"
            :dense="true"
          />
        </div>

        <div class="col-4 fal">Time:</div>
        <div class="col-8 q-pa-sm">
          <q-input
            borderless
            class="input-css"
            :model-value="props.qrcode.time"
            :dense="true"
          />
        </div>
      </div>
      <q-card-actions
        v-if="props.action == 'edit'"
        align="center"
        class="action"
      >
        <q-btn class="default-btn" @click="printQrCode">print</q-btn>
      </q-card-actions>
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import vueQr from 'vue-qr/src/packages/vue-qr.vue';
import { resolveDjangoUrl } from 'src/boot/axios';
import NFCPrinter from 'src/components/printer/NFCPrinter.vue'

const props = defineProps<{
  action: string;
  qrcode: {
    qr_code: string;
    date: string;
    time: string;
  };
  part_id?: number;
}>();

const printerDiag = ref(false)


function printQrCode() {
  // if (/Android/i.test(navigator.userAgent)) {
  //   console.log('This device is an Android device.');
  // } else if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
  //   console.log('This device is an iOS device.');
  // } else {
  //   console.log('This device is not a mobile device.');
  // }
  captureQrCode()
/*   setTimeout(() => {
    printQrImg();
  }, 500); */
}

function captureQrCode() {
  /*   const qrImg = document.getElementById('qr');
  if (qrImg) {
  const src = qrImg.getAttribute('src');
  console.log(src);
  if(src){
    console.log(`${resolveDjangoUrl()}/cews/qrcode/${props.part_id}`);
    
  } */
  printerDiag.value = true
  // window.open(`${resolveDjangoUrl()}/cews/qrcode/${props.part_id}`);
}



</script>

<style scoped></style>
